<!-- author: xuett -->
<!-- date: 2025-04-08 15:39:16 -->
<!-- description: 高德地图-离线地图瓦片 -->
<template>
  <!-- 地图 -->
  <div id="Map"></div>
</template>

<script setup>
const layers = [
  new AMap.TileLayer({
    getTileUrl: function (x, y, z) {
      return `/MAP_zxy/${z}/${x}/${y}.png`;
    },
    opacity: 1,
    zIndex: 99
  })
];

var map = null;
const allInfoWindow = shallowRef(null);
const state = reactive({
  fullScreen: false,
  selectMarker: null
});

onMounted(() => {
  LoadMap();
});

// 加载地图
const LoadMap = () => {
  map = new AMap.Map("Map", {
    // 设置地图容器id
    resizeEnable: true,
    zoom: 5,
    zooms: [5, 12],
    resizeEnable: true,
    rotateEnable: true,
    pitchEnable: true,
    center: [94.89, 36.42],
    defaultCursor: "pointer",
    layers: layers
  });

  map.on("complete", () => {
    state.fullScreen = false;
  });
  map.on("dragstart", () => {
    state.fullScreen = true;
  }); // 开始拖拽地图
  map.on("dragend", () => {
    state.fullScreen = false;
    console.log("test");
  }); // 停止拖拽地图
  createInfoWindow();
  let arr = [
    {
      name: 1,
      longitude: "112.57",
      latitude: "37.85"
    },
    {
      name: 2,
      longitude: "112.51",
      latitude: "37.77"
    }
  ];
  createAddressMarker(arr, "area");
};

//创建信息窗口
const createInfoWindow = () => {
  //信息窗口实例
  allInfoWindow.value = new AMap.InfoWindow({
    anchor: "top-left",
    // offset: new AMap.Pixel(50, 30),
    //隐藏原生弹窗边框和关闭按钮
    isCustom: true,
    autoMove: true,
    avoid: [20, 20, 20, 20],
    // 点击地图关闭
    closeWhenClickMap: true
  });
};

//创建区域marker
const createAddressMarker = (list, type) => {
  map.clearMap();
  let maxNum = (list.length / 10) * 2;
  maxNum = maxNum > 1 ? parseInt(maxNum) : 1;

  list.forEach((item, index) => {
    item.markerType = type;
    if (type == "area" && item.longitude && item.latitude) {
      let marker = new AMap.Marker({
        map: map,
        position: new AMap.LngLat(item.longitude, item.latitude),
        content: index < maxNum ? '<div class="green-marker"></div>' : '<div class="blue-marker"></div>',
        extData: item
      });
      marker.on("click", handleClickMarker);
    } else if (type == "building" && item.longitude && item.latitude) {
      let marker = new AMap.Marker({
        map: map,
        position: new AMap.LngLat(item.longitude, item.latitude),
        icon: floorIcon,
        anchor: "bottom-center",
        label: {
          direction: "top",
          content: "<div class='labelContent'>" + item.name + "</div>",
          offset: new AMap.Pixel(0, 15)
        },
        extData: item
      });
      marker.on("click", handleClickMarker);
    }
  });
  map.setFitView();
};

//点击地图事件
const handleClickMarker = (e) => {
  let extData = e.target.getExtData();
  if (extData.markerType == "area") {
    state.selectMarker = e.target.getExtData();
    //区域，显示信息弹窗
    nextTick(() => {
      allInfoWindow.value.setContent("窗口内容");
      allInfoWindow.value.open(map, e.target.getPosition());
    });
  }
};
</script>

<style scoped lang="scss">
#Map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
